<template>
  <div class="edu-retrieve">
    <div class="login-head">
      <!-- <img @click="$router.back()" :src="BASE_URL + logo_url" alt="未来教室logo"> -->
      <div class="logo fl">
        <img class="logoImage" @click="$router.back()" v-if="logo_url" :src="BASE_URL + logo_url" alt="logo" />
      </div>
    </div>

    <!-- 忘记密码（第一步） -->
    <div v-if="active == 1" class="forget-pwd clear">
      <!-- <img class="fl" src="../../../public/images/forget_pwd.png" alt="忘记密码图标"> -->

    </div>

    <!-- form菜单 -->
    <div class="title fl">
      <p>找回密码</p>
    </div>
    <div class="retrieve-menu">

      <!-- 进度条 -->
      <div class="step clear">
        <div class="first fl">
          <i :class="{ line: true, 'pass-step': active > 1, active: active == 1 }"></i>
          <i :class="{ number: true, 'pass-step': active > 1, active: active == 1 }">1</i>
          <p :class="{ 'pass-step2': active > 1, active2: active == 1 }">填写绑定的手机或邮箱</p>
        </div>
        <div class="second fl">
          <i :class="{ line: true, 'pass-step': active > 2, active: active == 2 }"></i>
          <i :class="{ number: true, 'pass-step': active > 2, active: active == 2 }">2</i>
          <p :class="{ 'pass-step2': active > 2, active2: active == 2 }">验证身份</p>
        </div>
        <div class="second fl">
          <i :class="{ line: true, 'pass-step': active > 3, active: active == 3 }"></i>
          <i :class="{ number: true, 'pass-step': active > 3, active: active == 3 }">3</i>
          <p :class="{ 'pass-step2': active > 3, active2: active == 3 }">设置新密码</p>
        </div>
        <div class="third fl">
          <i :class="{ line: true, active: active == 4 }"></i>
          <i :class="{ number: true, active: active == 4 }">4</i>
          <p :class="{ active2: active == 4 }">完成</p>
        </div>
      </div>



      <!-- （第一步） -->
      <div class="forget-pwd-f" v-if="active == 1" style="width: 400px;">
        <el-form :model="accountForm" ref="accountForm" :rules="rules" label-width="100px" hide-required-asterisk
          label-position="left" class="">
          <el-form-item label="手机/邮箱" prop="account">
            <el-input v-model.trim="accountForm.account" maxlength="30" placeholder="请输入登录手机号 / 邮箱"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code" class="code">
            <el-input v-model.trim="accountForm.code" maxlength="5" placeholder="请输入验证码">
              <template slot="append">{{ code }}</template>
            </el-input>
            <i class="el-icon-refresh-right refresh" @click="refresh('code')"></i>
          </el-form-item>
          <el-form-item class="operate">
            <el-button @click="$router.back()">返回</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-form>
      </div>


      <!-- （第二步） -->
      <div class="forget-pwd-f" v-if="active == 2 && forgetType == 1">
        <div style="display: flex;height: 80px;">
          <div style="width: 55px;height: 36px;">
            <!-- <img src="../../../public/images/phone_msg.png" alt="忘记密码图标"> -->
          </div>
          <div style="line-height: 50px;">
            <span class="gray">短信验证码已发送至: </span>
            <span class="black">{{ accountForm.account }}</span>
            <span class="gray" slot="margin-left:40px"> 请查收</span>
          </div>
        </div>
        <el-form :model="resetForm" ref="resetForm" :rules="resetRules" label-width="60px" hide-required-asterisk
          label-position="left" class="">
          <el-form-item label="验证码" prop="code2" class="code2">
            <el-input v-model="resetForm.code2" maxlength="6" placeholder="请输入验证码">
              <template slot="append">
                <span v-if="remaining > 0">{{ remaining }}s后重新获取</span>
                <el-button v-else type="primary" @click="getCode">获取验证码</el-button>
              </template>
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="新密码" prop="newPwd">
					<el-input v-model="resetForm.newPwd" type="password" maxlength="16" placeholder="请输入新密码">
					</el-input>
				</el-form-item> -->
          <el-form-item class="operate">
            <el-button type="primary" @click="checkCode">提交</el-button>
          </el-form-item>
        </el-form>

      </div>



      <div v-if="active == 2 && forgetType == 0" class="forget-pwd clear" style="margin-top: 90px;">
        <!-- <img class="fl" src="../../../public/images/emil_msg.png" alt="忘记密码图标"> -->
        <div class="fl" style="margin-top: 20px;">
          <p class="gray" style="font-size: 16px;">密码重设链接邮件发送成功</p>
          <p><span style="font-size: 14px;">已发送至</span><span class="black">{{ accountForm.account }}</span></p>
        </div>
        <el-button style="margin-left: 80px;margin-top: 20px;" type="primary" @click="goEmail">去邮箱</el-button>
      </div>


      <!-- （第三步） -->
      <div class="forget-pwd-f" v-if="active == 3" style="width: 400px;">
        <div style="height: 60px;font-size: 14px;">
          <p>重置密码</p>
          <p style="line-height: 30px;">账号:<span style="color: #25B2FF;font-size: 16px;">{{ accountForm.account }}</span>
          </p>
        </div>

        <el-form :model="resetForm" ref="resetForm" :rules="resetRules" label-width="100px" hide-required-asterisk
          label-position="left" class="">
          <el-form-item label="新密码" prop="newPwd">
            <el-input v-model="resetForm.newPwd" type="password" maxlength="16" placeholder="请输入新密码">
            </el-input>
          </el-form-item>

          <!-- <el-form-item label="新密码确认" prop="newPwd">
						<el-input v-model="resetForm.newPwd" type="password" maxlength="16" placeholder="请输入确认新密码">
						</el-input>
					</el-form-item> -->

          <el-form-item class="operate">
            <el-button type="primary" @click="submitNewPwd">提交</el-button>
          </el-form-item>
        </el-form>
      </div>



      <div class="forget-pwd-f" v-if="active == 4" style="width: 180px;">
        <div class="i_retrieve_c5 hode" style="display: block;">
          <i class="ipng zhuce_chenggong"></i>
          <p style="padding: 30px 0;">密码重设成功，请重新登录！</p>
          <div style="text-align: center;" class="success_btn">
            <el-button type="primary" @click="goLogin">去登录<i class="el-icon-arrow-right"></i></el-button>
          </div>
        </div>
      </div>

    </div>




    <!-- <div class="finish clear" v-if="active == 3">
			<p class="new_pwd fl">新密码设置完成</p>
		</div>
		<p class="timeout" v-if="active == 3">
			<span>{{ count >= 0 ? count : 0 }}秒</span>
			<span @click="$router.back()">&nbsp;&nbsp;后返回登录</span>
		</p>
	</div> -->
  </div>
</template>

<script>
import heade from '../common/head'
export default {
  components: {
    heade
  },
  data() {
    // 检验码验证码的方法
    let checkCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else if (value.toUpperCase() != this.code.toUpperCase()) {
        callback(new Error('请输入正确的验证码'));
      } else {
        callback()
      }
    };

    return {
      logo_url: sessionStorage.getItem('main_logo_url'),
      active: 1,   //当前所处的步骤
      forgetType: null,   // 找回密码的方式，通过手机为1,通过邮箱为0
      code: '',   // 存放验证码
      accountForm: {
        account: '',   // 新账号
        code: '',   // 用户输入的验证码
      },
      rules: {
        account: [
          { required: true, message: '请输入账号名称', trigger: 'blur' },
          { min: 4, max: 30, message: '长度在 4 到 30 个字符', trigger: 'blur' },
          { pattern: /(^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$)|(^((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+(\d{8})$)/, message: '手机号格式错误/邮箱格式错误', trigger: 'blur' },
        ],
        code: [
          { validator: checkCode, trigger: 'blur' },
        ]
      },
      resetForm: {
        code2: '',   // 验证码
        newPwd: ''   // 新密码
      },
      resetRules: {
        code2: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '请输入6位数字的验证码', trigger: 'blur' },
        ],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]*$/, message: '密码格式不正确', trigger: 'blur' },
        ]
      },
      count: 3,   // 倒数的秒数
      remaining: 0,   // 重新获取验证码的剩余时间
      timeID: null,    // 获取验证码的剩余时间的定时器id
      timeID2: null    // 跳转到第三部后剩余时间的定时器id
    }
  },
  created() {
    this.refresh(true);
  },
  beforeDestroy() {
    // 销毁组件之前清除定时器
    clearInterval(this.timeID);
    clearInterval(this.timeID2);
  },
  methods: {
    goLogin() {
      this.$router.push('/login')
    },
    // 刷新验证码方法
    refresh(status) {
      let len = 5;
      let str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
      let maxPos = str.length;
      let pwd = '';
      for (let i = 0; i < len; i++) {
        pwd += str.charAt(Math.floor(Math.random() * maxPos));
      }

      this.code = pwd;
      if (status == 'code') {
        this.$refs.accountForm.clearValidate(status);
      }
    },
    // 获取验证码的方法
    getCode() {
      const success = (res => {
        if (res.status == "success") {
          this.getTime()
        }
      });

      let params = {
        phone: this.accountForm.account,
        ismailphone: this.forgetType
      }


      this.$ajax.get('/api/login/send_phone_mail', { params: params, func: { success: success } })
    },
    // 提交表单方法,验证用户输入的手机或邮箱是否有绑定账号，有则进入下一步，没有则报错
    submitForm() {
      this.$refs.accountForm.validate((valid) => {
        if (valid) {
          this.accountForm.code = '';

          const success = (res => {
            if (res.status == "success") {
              // 跳到下一步
              this.active = 2;
              // 检测还有多久才能获取验证码
              this.getTime();
            }
          });

          let re = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/,
            re2 = /^((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+(\d{8})$/,
            params = { num: this.accountForm.account };

          // 输入账号为邮箱账号
          if (re.test(this.accountForm.account)) {
            params.type = this.forgetType = 0;
          }
          // 输入账号为手机账号
          else if (re2.test(this.accountForm.account)) {
            params.type = this.forgetType = 1;
          }

          this.$ajax.get('/api/login/get_user', { params: params, func: { success: success } })


        } else {
          return false;
        }

      });
    },
    // 获取发送的时间
    getTime() {
      const success = (res => {
        if (res.status == "success") {
          if (res.data.length <= 0) {
            // 重置剩余时间时间
            this.remaining = 0;
            return
          } else {
            this.remaining = res.data.next_time;

            this.timeID = setInterval(() => {
              this.remaining--
              if (this.remaining <= 0) {
                clearInterval(this.timeID);
              }
            }, 1000);
          }

        }
      });

      let params = { ismailphone: this.forgetType, access_token: this.$g.access_token };

      this.$ajax.get('/api/login/get_next_time', { params: params, func: { success: success } })
      // beforeSend: function(request) {
      //       request.setRequestHeader("Test", "yang");
      //     },

      // this.$ajax({
      // 	url: "/api/login/get_next_time",
      // 	method: "get",
      // 	// headers: {
      // 	// 	'access_token': this.$g.access_token,
      // 	// 	'ismailphone': 1
      // 	// },
      // 	params,
      // 	func: {
      // 		success,
      // 	},
      // });

      // this.$ajax({
      // 	type: "get",
      // 	// url: "/api/login/get_next_time",
      // 	url: "/api/login/get_nex",
      // 	headers: {
      // 		"access_token": this.$g.access_token,
      // 		"ismailphone": 1
      // 	},
      // 	// beforeSend: function(request) {
      // 	// 	request.setRequestHeader("access_token", "this.$g.access_token");
      // 	// 	request.setRequestHeader("ismailphone", "1");
      // 	// },
      // 	data: params,
      // 	success
      // });
    },
    // 倒数的执行方法
    reciprocal() {
      if (this.count <= 0) return

      this.timeID2 = setInterval(() => {
        if (this.count-- <= 0) {
          clearInterval(this.timeID2)
          this.$router.back();
        }
      }, 1000);
    },
    // 检测验证码是否正确
    checkCode() {
      this.$refs.resetForm.validate((valid) => {
        if (valid) {
          const success = (res => {
            if (res.status == "success") {
              // this.submitNewPwd();
              this.active = 3;
            }
          });

          let params = {
            code: this.resetForm.code2,
            type: this.forgetType
          };

          this.$ajax.get('/api/login/check_code', { params: params, func: { success: success } })
        } else {
          return false;
        }

      });
    },
    // 提交新密码的方法
    submitNewPwd() {
      const success = (res => {
        if (res.status == "success") {
          this.active = 3;
          this.reciprocal();
        }
      });

      let params = {
        password: this.resetForm.newPwd,
        type: this.forgetType
      };

      this.$ajax.put('/api/login/up_password', params, { func: { success: success } })
    },
  },
}
</script>

<style lang="scss">
.edu-retrieve {
  height: 100%;
  background-size: cover;
  background-color: #fff;

  .login-head {
    height: 90px;
    // background-color: #00132E !important;
    /* background-image: url("../../assets/images/head/top_bg.png");*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;

    .logo {
      width: 190px;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto 280px;
    }
  }

  .success_btn {
    .el-button {
      width: 80px !important;
      height: 35px;
      font-size: 12px;
      line-height: 7px;
    }
  }

  .title {
    p {
      color: #020202;
    }

    margin-left: 360px;
    margin-top: 40px;
  }

  .el-form-item__label {
    color: #020202;
  }

  .retrieve-menu {
    margin: 50px auto;
    padding: 0 100px;
    width: 880px;
    height: 560px;



    .el-button {
      width: 80px !important;
      height: 32px;
      line-height: 7px;
    }


    .el-button--primary {
      background-color: #0064FF;
      border: none;
    }

    .fl p {
      color: #fff
    }

    .operate {
      margin-top: 50px;

      .el-form-item__content {
        display: flex;

        .el-button {
          width: 80px !important;
          height: 32px;
          line-height: 7px;
        }

        .el-button--primary {
          background-color: #0064FF;
          border: none;
        }
      }

    }

    .black {
      font-size: 18px;
      color: #25B2FF;
    }

    // 进度条
    .step {
      padding-top: 40px;



      >div {
        position: relative;
        width: 200px;
        text-align: center;

        .line {
          display: block;
          padding-top: 13px;
          width: 100%;
          height: 4px;
          background: #dad9d9;
          background-clip: content-box;
        }

        .number {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          display: inline-block;
          width: 30px;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #625454;
          border-radius: 50%;
          background: #dad9d9;
        }

        >p {
          margin-top: 23px;
          color: #625454;
          font-size: 12px;
          line-height: 16px;
        }

        .pass-step {
          background: #5FC042;
          background-clip: content-box;
        }

        .pass-step2 {
          color: #5FC042;
        }

        .active {
          background: #5FC042;
          background-clip: content-box;
        }

        .active2 {
          color: #5FC042;
        }

      }

    }

    // 忘记密码
    .forget-pwd {
      // margin-top: 80px;
      color: #fff;

      >img {
        margin-left: 150px;
        // width: 60px;
        // height: 60px;
      }

      >div {
        margin-left: 25px;

        p,
        span {
          line-height: 30px;

          &:first-child {
            font-size: 16px;
          }

          &:last-child {
            font-size: 14px;
            color: #fff;
          }

          &.black {
            font-size: 20px;
            color: #25B2FF;
          }

          &.gray {
            font-size: 14px;
            color: #fff;
          }

        }

      }

    }

    .forget-pwd-f {
      margin: 130px auto;
      width: 380px;
    }

    // form表单
    .el-form {


      .el-form-item {
        input {
          border-radius: 0;
        }

        // .el-input__inner {
        //   color: #fff;
        //   background: #00132E;
        //   border: 1px solid #1B5DB6;
        //   border-radius: 4px 0 0 4px;
        //   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
        // }

        // 填写用户名的验证码
        &.code {
          .el-form-item__content {
            input {
              width: 180px;
            }

            .el-input-group__append {
              padding: 0 10px;
              width: 60px;
              text-align: center;
              border-radius: 0;
              background: #D8F2D4;
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
              letter-spacing: 2px;
              font-style: oblique;
              color: #0064FF;
            }

          }

          .refresh {
            position: absolute;
            top: 50%;
            right: -35px;
            transform: translateY(-50%);
            font-size: 22px;
            color: #999999;
            font-weight: bold;
            cursor: pointer;
          }
        }

        // 设置新密码的验证码
        &.code2 {
          .el-form-item__content {
            input {
              width: 180px;
            }

            .el-input-group__append {
              padding: 0;
              border: 0 none;
              border-radius: 0;
              background: transparent;

              >span {
                font-size: 12px;
                color: #666666;
              }

              .el-button {
                margin: 0;
                padding: 0;
                width: 85px;
                height: 28px;
                line-height: 28px;
                font-size: 12px;
                color: #fff;
                background: #0064FF;

                &:hover {
                  background: #66b1ff;
                }
              }

            }

          }

        }

        &:last-child {
          .el-form-item__content {
            .el-button {
              width: 100%;
            }

          }

        }

      }

    }

    // 完成的样式
    .finish {
      margin-top: 180px;

      >img {
        margin-left: 190px;
        width: 60px;
        height: 60px;
      }

      .new_pwd {
        margin-left: 16px;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
      }

    }

    .timeout {
      margin-top: 53px;
      text-align: center;
      font-size: 16px;

      >span {
        color: #238DFF;

        &:last-child {
          color: #555555;
          cursor: pointer;
        }
      }
    }

  }

}
</style>